<script setup lang="ts">
import { ref, watch, onMounted, defineEmits, defineProps, defineExpose, computed } from 'vue';
import { createIframeVisualEditor, type IframeVisualEditor, type SelectedElementInfo } from '@/utils/iframeVisualEditor';

const props = defineProps<{
  previewUrl: string;
  editMode: boolean;
  codeGenerated: boolean;
  minHeight?: string | number;
}>();

const minH = computed(() => typeof props.minHeight === 'number' ? `${props.minHeight}px` : (props.minHeight || '80vh'));

const emits = defineEmits<{
  (e: 'ready'): void;
  (e: 'select', info: SelectedElementInfo): void;
  (e: 'unselect', selector: string): void;
  (e: 'fschange', isFs: boolean): void;
}>();

const containerRef = ref<HTMLDivElement | null>(null);
const iframeRef = ref<HTMLIFrameElement | null>(null);
const editorRef = ref<IframeVisualEditor | null>(null);

function bindEditor() {
  const iframe = iframeRef.value as HTMLIFrameElement | null;
  if (!iframe) return;
  editorRef.value = createIframeVisualEditor(iframe, {
    onReady: () => emits('ready'),
    onSelect: (info) => emits('select', info),
    onUnselect: (selector) => emits('unselect', selector)
  });
}

function enable() { editorRef.value?.enable(); }
function disable() { editorRef.value?.disable(); }
function clearSelection() { editorRef.value?.clearSelection(); }
function unselect(selector: string) { editorRef.value?.unselect(selector); }
function reload() { if (iframeRef.value) iframeRef.value.src = props.previewUrl; }

async function enterFullscreen() {
  const el = containerRef.value as any;
  if (!el) return;
  try {
    if (el.requestFullscreen) await el.requestFullscreen();
    else if (el.webkitRequestFullscreen) await el.webkitRequestFullscreen();
    else if (el.msRequestFullscreen) await el.msRequestFullscreen();
    emits('fschange', true);
  } catch {
    emits('fschange', true); // 交由父层用CSS降级
  }
}
async function exitFullscreen() {
  const d: any = document;
  try {
    if (document.fullscreenElement) await document.exitFullscreen();
    else if (d.webkitFullscreenElement) await d.webkitExitFullscreen();
    else if (d.msFullscreenElement) await d.msExitFullscreen();
    emits('fschange', false);
  } catch {
    emits('fschange', false);
  }
}

defineExpose({ enable, disable, clearSelection, unselect, reload, enterFullscreen, exitFullscreen });

onMounted(() => {
  bindEditor();
  if (props.editMode) enable();
});

watch(() => props.previewUrl, () => {
  if (iframeRef.value) iframeRef.value.src = props.previewUrl;
  bindEditor();
  if (props.editMode) enable(); else disable();
});

watch(() => props.editMode, (val) => { val ? enable() : disable(); });
</script>

<template>
  <div class="preview-pane" :style="{ minHeight: minH }" ref="containerRef">
    <div v-if="!codeGenerated" class="preview-placeholder">
      <p>请通过对话指导AI创建您的应用，然后在这里预览效果...</p>
    </div>
    <iframe
      v-else
      ref="iframeRef"
      :src="previewUrl"
      class="preview-iframe"
      sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts"
      :style="{ minHeight: minH }"
    />
  </div>
</template>

<style scoped>
.preview-pane { width: 100%; height: auto; position: relative; }
.preview-iframe { width: 100%; height: 100%; border: none; background: #fff; display: block; }
.preview-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(0,0,0,0.45); text-align: center; padding: 24px; }
</style> 